import { history } from 'umi';
import React from 'react';
import { NavBar, Flex, Button, Toast, Dialog } from 'react-vant';
import { SafeArea } from 'antd-mobile';
import './promotion.less';
import qrcode from '../assets/service-qrcode.png';

const goBack = () => {
  history.back();
}

const goAchievement = () => {
  history.push('/achievement');
}

export default function PromotionPage() {
  return (
    <div className='promotion'>
      <NavBar title='推广拿佣金' leftText='返回' rightText='我的业绩' onClickLeft={goBack} onClickRight={goAchievement} />
      <div className='container'>
        <div className='promotion-box'>
          <h3 className='promotion-title'>我的二维码</h3>
          <div className='promotion-qrcode'>
            <img width='180' height='180' src={qrcode} alt='推广二维码'/>
          </div>
          <div className='promotion-desc'>
            客户通过此二维码下单，您可以获得佣金。<br />
            长按可保存此二维码 ·
            <span onClick={() =>
              Dialog.alert({
                title: '营销分佣规则',
                closeable: true,
                theme: 'round-button',
                confirmButtonText: '知道了',
                message: (
                  <ol style={{ textAlign: 'center', margin: '10px' }}>
                    <li>自然月第1-30单，佣金10%；</li>
                    <li>自然月第31-50单，佣金15%；</li>
                    <li>自然月第51单开始，佣金20%；</li>
                  </ol>
                ),
              })
            }>
            查看分佣规则</span>
          </div>
        </div>
      </div>
      <div className="container">
        <div className='promotion-box'>
          <h3 className='promotion-title'>营销邀请码</h3>
          <Flex className='promotion-incode' align='center' justify='center' gutter={10}>
            <Flex.Item className='invite-code'>KDOVTCT</Flex.Item>
            <Flex.Item><Button className='copy-btn' plain size='small' onClick={() => Toast.info('复制成功')}>复制</Button></Flex.Item>
          </Flex>
          <div className='promotion-desc'>
            邀请其他营销入驻，可获得额外奖励<br />
            需要其他营销在入驻时，填写您的邀请码
          </div>
        </div>
      </div>
      <SafeArea position='bottom' />
    </div>
  );
}
